﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>



    <!-- 工具栏模板（包含添加按钮） -->
    <script type="text/html" id="toolbarDemo">
           <!--条件查询-->
        <form class="layui-form layui-row layui-col-space16" id="searchForm" lay-filter="searchFormFilter">
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <label class="layui-input-inline">物料编码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="material_code" placeholder="请输入物料编码" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <label class="layui-input-inline">物料名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="material_name" placeholder="请输入物料名称" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-btn-container layui-col-xs12">
                <button class="layui-btn" lay-submit lay-filter="searchSubmit">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addData">添加数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
            <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
                重载测试
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
                <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
        </div>
    </script>

    <!-- 单元格操作模板 -->
    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs" lay-event="more">
                更多
                <i class="layui-icon layui-icon-down"></i>
            </a>
        </div>
    </script>



    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'dropdown', 'layer', 'form', 'jquery'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;


         
            // 表格实例
            var tableIns;
            // 初始化表格
            function initTable() {
                tableIns = table.render({
                    elem: '#test',
                    // url: 'http://localhost:5234/api/Materials/GetMaterial_Basic',// 后端数据接口
                    url: "@ViewBag.BaseUrl/T7/Materials/GetMaterial_Basic",
                    toolbar: '#toolbarDemo',
                    defaultToolbar: ['filter', 'exports', 'print', {
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips',
                        onClick: function () {
                            layer.alert('自定义工具栏图标按钮');
                        }
                    }],
                    height: 'full-35',
                    cellMinWidth: 80,
                    totalRow: true,
                    page: true,
                    cols: [[
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'material_id', fixed: 'left', width: 100, title: '序号', sort: true },
                        { field: 'material_code', width: 180, title: '物料编码' },
                        { field: 'material_name', width: 180, title: '物料名称' },
                        { field: 'model_specification', width: 180, title: '型号规格' },
                        { field: 'unit_of_measurement_name', width: 180, title: '主计量' },
                        { field: 'supply_method_name', width: 180, title: '供应方式' },
                        { field: 'drawing_number', width: 180, title: '图纸号' },
                    ]],
                    error: function (res, msg) {
                        console.error('表格加载失败:', res, msg);
                    }
                });
            }
            initTable();

            // 条件查询表单提交逻辑
            form.on('submit(searchSubmit)', function (data) {
                // 表格重载并传递查询参数
                tableIns.reload({
                    where: data.field, // 传递查询参数
                    page: { curr: 1 } // 重置到第一页
                });
                return false;
            });


            // 工具栏事件处理
            table.on('toolbar(test)', function (obj) {
                switch (obj.event) {
                    case 'addData':
                        openAddDialog(); // 打开添加弹窗
                        break;
                    case 'getCheckData':
                        var checkStatus = table.checkStatus(obj.config.id);
                        var data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'getData':
                        var currentData = table.getData(obj.config.id);
                        layer.alert(layui.util.escape(JSON.stringify(currentData)));
                        break;
                    
                }
            });


          

            // 打开添加弹窗
            function openAddDialog() {
                layer.open({
                    type: 1,
                    title: '添加物料基本档',
                    content: `
                                            <form class="layui-form" id="materialForm">

                                          <label class="layui-form-label">* 选择分类</label>
                                      <div class="layui-input-block">
                                          <select name="categoryId" lay-verify="required">
                                             <option value="0">请选择</option>
                                             <option value="1">成品</option>
                                             <option value="2">装配件</option>
                                             <option value="3">零部件</option>
                                             <option value="4">纸杯机</option>
                                             <option value="5">配套机</option>
                                             <option value="6">测试11</option>
                                             <option value="7">zj成品</option>
                                             <option value="8">框架</option>
                                             <option value="9">总成</option>
                                             <option value="10">原材料</option>
                                             <option value="11">五金件</option>
                                             <option value="12">包装物</option>
                                             <option value="13">半成品</option>
                                             <option value="14">螺钉</option>
                                          </select>
                                      </div>


                               
                                 <div class="layui-form-item">
                                     <label class="layui-form-label">* 主计量</label>
                                     <div class="layui-input-block">
                                         <select name="mainUnit" lay-verify="required">
                                             <option value="0">请选择</option>
                                             <option value="1">无</option>
                                             <option value="2">克</option>
                                             <option value="3">千米</option>
                                             <option value="4">米</option>
                                             <option value="5">升</option>
                                             <option value="6">只</option>
                                             <option value="7">支</option>
                                             <option value="8">台</option>
                                             <option value="9">套</option>
                                             <option value="10">千克</option>
                                         </select>
                                          
                                     </div>
                                 </div>
                                 <div class="layui-form-item">
                                     <label class="layui-form-label">* 物料名称</label>
                                     <div class="layui-input-block">
                                         <input type="text" name="materialName" lay-verify="required" class="layui-input">
                                     </div>
                                 </div>
                                 <div class="layui-form-item">
                                     <label class="layui-form-label">供应方式</label>
                                     <div class="layui-input-block">
                                         <select name="supplyMethod">
                                             <option value="1">采购</option>
                                             <option value="2">加工</option>
                                             <option value="3">委外</option>
                                             <option value="4">装配</option>
                                             <option value="5">生产</option>
                                             <option value="6">无</option>
                                         </select>
                                     </div>
                                 </div>
                                 <div class="layui-form-item">
                                     <label class="layui-form-label">型号规格</label>
                                     <div class="layui-input-block">
                                         <input type="text" name="modelSpec" class="layui-input">
                                     </div>
                                 </div>
                                 <div class="layui-form-item">
                                     <label class="layui-form-label">图纸号</label>
                                     <div class="layui-input-block">
                                         <input type="text" name="drawingNo" class="layui-input">
                                     </div>
                                 </div>
                                 <div class="layui-form-item">
                                     <label class="layui-form-label">规格描述</label>
                                     <div class="layui-input-block">
                                         <textarea name="specDesc" class="layui-textarea"></textarea>
                                     </div>
                                 </div>
                                 <div class="layui-form-item">
                                     <label class="layui-form-label">允许负库存</label>
                                     <div class="layui-input-block">
                                         <input type="checkbox" name="allowNegativeStock" lay-skin="switch">
                                     </div>
                                 </div>
                                         <div class="layui-form-item">
                                         <label class="layui-form-label">保持物料名称</label>
                                         <div class="layui-input-block">
                                           <input type="checkbox" name="keep_material_name" title="保持物料名称" lay-skin="primary">
                                         </div>
                                     </div>
                                 <div class="layui-form-item">
                                     <label class="layui-form-label"></label>
                                     <div class="layui-input-block">
                                         <button class="layui-btn" lay-submit lay-filter="submitBtn">确定</button>
                                         <button class="layui-btn layui-btn-secondary" type="reset">取消</button>
                                     </div>
                                 </div>
                             </form>
                                 `,
                    area: ['600px', 'auto'],
                    success: function (layero) {
                        form.render(); // 渲染表单元素
                        form.on('submit(submitBtn)', function (data) {
                            addDepartment(data.field); // 提交数据到后端
                            layer.closeAll(); // 关闭弹窗
                            return false; // 阻止表单默认提交
                        });
                    }
                });
            }
            // 发送添加请求到后端
            function addDepartment(data) {
                layer.load(2); // 显示加载动画
                // 字段映射和类型转换
                const requestData = {
                    category_id: parseInt(data.categoryId) || 0,
                  
                    material_name: data.materialName || '',
                    model_specification: data.modelSpec || '',
                    drawing_number: data.drawingNo || '',
                    specification_desc: data.specDesc || '',
                    unit_of_measurement_id: parseInt(data.mainUnit) || 0,
                    supply_method_id: parseInt(data.supplyMethod) || 0,
                    allow_negative_stock: data.allowNegativeStock === 'on',
                    keep_material_name: data.keep_material_name === 'on'
                };
                $.ajax({
                    //url: 'http://localhost:5090/api/Materials/AddMaterial_Basic', // 后端添加接口
                    url: "@ViewBag.BaseUrl/T8/Materials/AddMaterial_Basic", 
                    type: 'POST',
                    headers: {
                        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VyTmFtZSI6IlpDIiwiVXNlcklkIjoiMSIsImV4cCI6MTc0MzA0NTAwOSwiaXNzIjoiZ3JvdXBUd28iLCJhdWQiOiJncm91cFR3byJ9.o5KYnBxK-O0VAF14_yv1hTRDUIiNNY023m0Cy2VkTgE',
                        'Content-Type': 'application/json'
                    },
                    data: JSON.stringify(requestData),
                    success: function (res) {
                        layer.closeAll('loading'); // 关闭加载动画
                        if (res.code === 212) { // 根据后端实际状态码调整
                            layer.msg('添加成功', { icon: 1 });
                            layer.closeAll(); // 关闭弹窗
                            table.reload('test'); // 刷新表格数据
                        } else {
                            layer.msg('添加失败: ' + (res.message || '未知错误'), { icon: 2 });
                        }
                    },
                    error: function (xhr) {
                        layer.closeAll('loading');
                        layer.msg('网络请求失败: ' + xhr.status, { icon: 2 });
                        console.error('AJAX请求失败:', xhr.responseText);
                    }
                });
            }

          


            // 下拉按钮、重载测试等原有功能代码（保持不变）
            // ...（原有dropdown相关代码可根据需要保留）
            // 重载测试
            dropdown.render({
                elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
                data: [{
                    id: 'reload',
                    title: '重载'
                }, {
                    id: 'reload-deep',
                    title: '重载 - 参数叠加'
                }, {
                    id: 'reloadData',
                    title: '仅重载数据'
                }, {
                    id: 'reloadData-deep',
                    title: '仅重载数据 - 参数叠加'
                }],
                // 菜单被点击的事件
                click: function (obj) {
                    switch (obj.id) {
                        case 'reload':
                            // 重载 - 默认（参数重置）
                            table.reload('test', {
                                where: {
                                    abc: '123456',
                                    //test: '新的 test2',
                                    //token: '新的 token2'
                                },

                            });
                            break;
                        case 'reload-deep':
                            // 重载 - 深度（参数叠加）
                            table.reload('test', {
                                where: {
                                    abc: 123,
                                    test: '新的 test1'
                                },
                                //defaultToolbar: ['print'], // 重载头部工具栏右侧图标
                                //cols: ins1.config.cols
                            }, true);
                            break;
                        case 'reloadData':
                            // 数据重载 - 参数重置
                            table.reloadData('test', {
                                where: {
                                    abc: '123456',
                                    //test: '新的 test2',
                                    //token: '新的 token2'
                                },
                                scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
                                height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                //url: '404',
                                //page: {curr: 1, limit: 30} // 重新指向分页
                            });
                            break;
                        case 'reloadData-deep':
                            // 数据重载 - 参数叠加
                            table.reloadData('test', {
                                where: {
                                    abc: 123,
                                    test: '新的 test1'
                                }
                            }, true);
                            break;
                    }
                    layer.msg('可观察 Network 请求参数的变化');
                }
            });

            // 行模式
            dropdown.render({
                elem: '#rowMode',
                data: [{
                    id: 'default-row',
                    title: '单行模式（默认）'
                }, {
                    id: 'multi-row',
                    title: '多行模式'
                }],
                // 菜单被点击的事件
                click: function (obj) {
                    var checkStatus = table.checkStatus(id)
                    var data = checkStatus.data; // 获取选中的数据
                    switch (obj.id) {
                        case 'default-row':
                            table.reload('test', {
                                lineStyle: null // 恢复单行
                            });
                            layer.msg('已设为单行');
                            break;
                        case 'multi-row':
                            table.reload('test', {
                                // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                lineStyle: 'height: 95px;'
                            });
                            layer.msg('即通过设置 lineStyle 参数可开启多行');
                            break;
                    }
                }
            });





        });
    </script>
</body>
</html>